以下會有關於CSS內方框的一些基本介紹及應用，我們可以利用一些屬性配置來更改方框尺寸以及外觀，接下來就進入正題吧!

方框尺寸

height:設定方框高度。

width:設定方框寬度。

我們可以使用以上這兩種屬性來調整方框的高度及寬度，常使用的單位為像素、百分比、em。
在設計與撰寫RWD網頁時，靈活運用百分比以及em這種相對單位，可以讓頁面設計更有彈性。

*em是一種相對單位，會相對於標籤本身的font-size值作為單位，若該標籤沒有指定font-size，則會往上尋找父標籤的值作為單位，但要注意的是，如果有多層font-size都使用em，那越內層的標籤將會呈現倍數加大，比如說最外層的font-size值為10px，第二層的值為1.2em，即為10x1.2=12px，但接下來第三層如果還是使用1.2em，則會變成12x1.2=14.4px，以此類推。

限制高度及寬度

為了因應一些會隨著使用者螢幕大小縮放的網頁，我們可以使用一些屬性來控制最多可以放大或縮小到甚麼樣的尺寸，屬性說明如下:

min-width:設定最小寬度。

max-width:設定最大寬度。

min-height:設定最小高度。

max-height:設定最大高度。

溢出內容的應變方法

當內容比方框大時，可以使用overflow這個屬性來告訴瀏覽器該如何處理這個狀況，屬性值說明如下:

overflow:auto; 預設值，會自動使用捲軸。

overflow:visible; 顯示的內容會直接超出範圍，不使用捲軸。

overflow:hidden; 自動隱藏超出範圍的內容。

overflow:scroll; 自動產生捲軸。

*有時網站會出現x方向的捲軸，此時可以強制隱藏x軸捲軸，並讓y軸自動延伸，方式如下:

overflow-x:hidden;
overflow-y:auto

邊框寬度

border-width:這個屬性可以用來控制邊框寬度，可以用像素為單位，也可以使用thin（細）、medium（中）、thick(粗)，須注意的是這個屬性不能使用百分比為單位。

可以使用以下屬性分別控制

border-top-width(上)
border-right-width(右)
border-bottom-width(下)
border-left-width(左)

可以在一個屬性中為四個邊框指定不同粗細，此方式為速記法，寫法如下:

border-width: 2px 3px 4px 5px;

在以上出現的值為順時鐘，分別為上、右、下、左。

border-width: 2px 3px;

在以上出現的值為上下寬度2px，左右寬度為3px

邊框樣式

border-style:可以用來控制邊框樣式，常用樣式可以參考以下網址

http://www.eion.com.tw/Blogger/?Pid=1118

可以改變各方向邊框樣式，屬性如下:

border-top-style(上)
border-right-style(右)
border-bottom-style(下)
border-left-style(左)

也可以使用速記法改變各方向邊框樣式:

border-style: 上 右 下 左;

邊框顏色

border-color: 這個屬性用來指定邊框顏色，值可以使用RGB、hex碼、及CSS顏色名。

可以使用以下屬性改變不同方向邊框顏色

border-top-color(上)
border-right-color(右)
border-bottom-color(下)
border-left-color(左)

可以使用速記法

border-color: 上 右 下 左;

border速記屬性

這個屬性可以在單一屬性內同時指定邊框寬度、樣式及顏色，寫法如下:

border: 3px dotted ##ff8800

以上分別代表著邊框粗細、樣式、顏色。

內距 padding

這個屬性用在指定標籤的內容和邊框之間的距離，在邊界以內，此屬性
可使用速記，屬性值可用像素(px)及百分比，寫法如下:

padding: 10px;

也可以指定不同方向的直

padding-top
padding-right
padding-bottom
padding-left

邊界 margin

此屬性控制邊框之間的空隙，也就是控制此邊框與其他邊框的距離，可指定不同方向也可使用速記法，寫法如下

margin: 10px;

內容置中

如果想把方框放在頁面中間，可將margin-left與margin-right值設定為auto，速記法寫法如下:

margin: 20px auto 20px auto;

參考來源:

書籍:HTML&CSS 網站設計建置優化之道

CSS 小技巧分享：em 單位的強大用途

實際展示 EM 與 REM 的差異

CSS overflow 屬性用法

margin